<template>
  <div class="row-main" style="display: flex;justify-content: center;align-items: center">
    <el-card class="box-card" style="width: 500px;">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>{{title}}</span>
      </div>
      <div :style="{'overflow-x': $store.state.app.screenWidth<590?'scroll':'none'}">
        <img :src="path" style="width: 100%">
        <el-row style="margin-top: 20px">
          <span>微信昵称：{{wxname==null?'尚未绑定':wxname}}</span>
        </el-row>
        <el-row style="margin-top: 20px" :rule="[{required: true,message: '请输入手机号'},{pattern: /^1[345678]\d{9}$/, message: '目前只支持中国大陆的手机号码'}]">
          <el-input v-model="phone" placeholder="请输入手机号" :disabled="displayShow"></el-input>
        </el-row>
        <el-row style="margin-top: 20px" :gutter="20">
          <el-col :span="15">
            <el-input v-model="code" placeholder="验证码"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button icon="el-icon-message" type="shenda" @click="verificationCodeHandle" :loading="sendLoading" >发送验证码</el-button>
          </el-col>
        </el-row>

        <el-row style="margin-top: 40px;text-align: center" >
          <el-button icon="el-icon-lock" type="success" @click="check" v-preventReClick>绑定微信</el-button>
          <el-button icon="el-icon-unlock" type="warning" @click="relieveWx" v-preventReClick>解绑微信</el-button>
        </el-row>
      </div>
    </el-card>

  </div>
</template>

<script>
  import {getAgentId, getAgentInfoShort, initializationRegister, updateUserPhone, relieveWx,sendVerificationCode} from '@/api/getData'
  import {decryptDes} from '@/utils/utils'

  export default {
    data() {

      return {
        title: '微信秒返设置',
        checkLoading: false,
        encryptedString: '',
        displayShow: false,
        wxname: "",
        path: "",
        phone: '',
        code: '',
        sendLoading: true,
        newEncryptedString: '',
        pagekey: '',
      }
    },
    async created() {
      this.initData()

      //实例化短信接口
      const returnData = await initializationRegister({
        messageFlag: 'XIAOXIANG'
      })
      if (returnData._result) {
        this.encryptedString = returnData.data
        this.sendLoading=false
      }
      this.pagekey = await this.$getPageKey();

    },
    name: "agentTieWx",

    methods: {

      initData(){
        //查出代理的简短信息
        getAgentInfoShort().then(v => {
          if (!v.data.phone == null || !v.data.phone == '') {
            this.phone = v.data.phone
            this.displayShow = true
          }
          this.wxname = v.data.wxname
        })
      },

      async check() {

        let code = await updateUserPhone({
          phone: this.phone,
          msgCode: this.code,
          uid: this.newEncryptedString
        },{pagekey: this.pagekey});
        if (code._result) {
          let id = await getAgentId();
          let p = "/api/OEM-setting-system/hostname/getOemOpenId?id=" + id.data;
          this.path = p;
          this.$message.success("请打开微信扫描二维码！")
          this.title="请打开微信扫描二维码！";
        }
        this.pagekey = await this.$getPageKey();
      },
      async relieveWx() {
        let res = await relieveWx({
          msgCode: this.code,
          uid: this.newEncryptedString,
          phone:this.phone
        },{pagekey: this.pagekey});
        if (res._result) {
          this.initData()
          this.$message.success("操作成功！")
        }
        this.pagekey = await this.$getPageKey();
      },
      async verificationCodeHandle() {
        let reg = /^1[345678]\d{9}$/;
        if(!reg.test(this.phone)){
          this.$message.error('请修改您输入的手机号~')
          return false;
        }
        this.sendLoading = true
        const returnData = await sendVerificationCode({
          uid: decryptDes(this.encryptedString, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l']),
          phone: this.phone,
          messageFlag: 'XIAOXIANG',
          remark:"绑定/解绑"
        })

        if (returnData._result) {
          this.newEncryptedString = returnData.data
          this.$message.success("发送成功！")
        }

      }
    }

  }
</script>

<style scoped>
  .center {
    margin: 30px auto;
  }
</style>
